<template>
	<ui-container :isCanScroll="isCanScroll" :scrollGoTop="scrollGoTop" :full="true" @scrolltolower="scrolltolower"
		@scroll="scroll" :scrollbar="false">
		<view>
			<view class="wrap">
				<view class="header">
					<uni-nav-bar left-icon="back" title="个人工单" statusBar="true" :fixed="false" backgroundColor="#2C2C2C"
						color="#fff" @clickLeft="handleBack" v-if="type == 2"></uni-nav-bar>
					<Header v-else ref="Headers" @filter="filterFuc" :tabIdx="filtIdx" :customDate="customDate"
						:shadow="false" @toNext="toNext" :myElevator="true" :filterList="filterList"></Header>

					<view class="tabs">
						<view :class="['tabs-item', tabIdx == 0 ? 'act' : '']" @click="handleClickTab(0)">保养({{
							totalData.byOrderCount || 0
						}})</view>
						<view :class="['tabs-item', tabIdx == 1 ? 'act' : '']" @click="handleClickTab(1)">维修({{
							totalData.wxOrderCount || 0
						}})</view>
						<view :class="['tabs-item', tabIdx == 2 ? 'act' : '']" @click="handleClickTab(2)">配件({{
							totalData.pjOrderCount || 0
						}})</view>
					</view>
					<view class="fitlerBox">
						<view class="left">
							<!-- <input type="text" v-model="seachForm.keyword" placeholder="请输入项目/电梯关键词" @confirm="handleReSet" 
						confirm-type="search"
						/> -->
							<uni-search-bar :radius="10" v-model="seachForm.keyword" :disabled="false" clearButton="always"
								placeholder="请输入项目/电梯关键词" style="width: 600rpx;" @blurs="handleReSet" />
							<!-- <image src="/static/images/index/search.png" mode=""></image> -->
						</view>
						<view class="right">
							<filterModel :all="false" :orderType="tabIdx" ref="filterModel" :dateOpt="dateObj"
								:typeForm="type" :userIds="seachForm.userList" :keyword="seachForm.keyword" :csd="csd"
								:start="seachForm.startTime" :end="seachForm.endTime" @filterd="filterd"
								@showFilterChange="showFilterChange"></filterModel>
						</view>
					</view>
					<view class="tips" v-if="type == 2">
						<view>
							仅显示已完成的任务，未完成任务请前往[我的任务]。
						</view>
						<view class="" @click="toMyTask">
							前往
							<uni-icons size="16" type="arrowright"></uni-icons>
						</view>
					</view>
				</view>

				<!-- 底部 -->
				<!-- <filterContent :showFilter="showFilter" :tabIdx="tabIdx" v-if="showFilter" @close="handleClose" @filterd="getFilterData" :csd="csd"></filterContent> -->
				<tk-screen-scroll :list="['保养', '维修', '配件']" @getActIdx="getActIdx" :active="tabIdx" :height="135">
					<view class="none-block" v-if="!loading && total == 0">
						<view class="img">
							<image src="@/static/images/default.png"></image>
						</view>
						<view class="text">- 暂无相关数据 -</view>
					</view>
					<view class="records" :style="{ marginTop: type !== 2 ? '16rpx' : '0rpx' }">
						<!-- {{type}} -->
						<view class="records-item" v-for="(item, index) in list" :key="item.planId"
							:style="{ marginTop: index == 0 ? 0 : '20rpx' }">
							<view class="records-item-head" @click.stop="toProjectDetail(item)">
								<view class="buildding" @click.stop="toBuilddingDetail(item)">
									<image src="/static/images/index/build.svg	" mode=""></image>
									<view class="">
										{{ item.buildingName }}
										<uni-icons color="#999999" type="forward"></uni-icons>
									</view>
								</view>
								<view class="status" v-if="tabIdx == 0">
									<image :src="statusBy[item.status].icon"></image>
									<view :style="{ color: statusBy[item.status].color }">{{ item.statusDesc }}</view>
								</view>
								<view class="status" v-if="tabIdx == 1">
									<image v-if="statusWx[item.status].icon" :src="statusWx[item.status].icon"></image>
									<view :style="{ color: statusWx[item.status].color }">{{
										statusWx[item.status].text
									}}
									</view>
								</view>
								<view class="status" v-if="tabIdx == 2">
									<image v-if="statusPj[item.status].icon" :src="statusPj[item.status].icon"></image>
									<view :style="{ color: statusPj[item.status].color }">{{
										statusPj[item.status].text
									}}
									</view>
								</view>
							</view>

							<view class="records-item-content" @click.stop="toDetail(item)">
								<view class="left">
									<view class="name">{{ item.elevatorAddress }}</view>
									<view class="tags" v-if="tabIdx == 0">
										<!-- 绩效统计->详情->保养 -->
										<tags-component label="保养：" :templateNames="item.templateNames" :displayCount="6" />
									</view>
									<view class="tags" v-if="tabIdx == 1">
										<view class="lable">维修：</view>
										<view class="tag" v-if="item.partsName">{{ item.partsName }}
										</view>
										<template v-if="item.problemItemNames">
											<view class="tag" v-for="tag in item.problemItemNames" :key="tag">{{ tag }}
											</view>
										</template>
									</view>
									<view class="tags" v-if="tabIdx == 2">
										<view class="lable">配件：</view>
										<view class="tag">配件更换</view>
									</view>
									<view class="labs" v-if="tabIdx == 0">
										<view class="lab" v-if="item.overdueName && item.overdueName.indexOf('逾期') != -1">
											{{
												item.overdueName
											}}</view>
										<view class="lab" style="background: #fdf1e9;color: #fa6400;"
											v-if="item.timeliness && item.timeliness.indexOf('超时') != -1">
											{{
												item.timeliness
											}}</view>
										<!-- <view class="lab" v-if="item.isDeferred === 1">延期保养</view> -->
										<view class="lab" style="margin: 0 10rpx;"
											v-if="item.deferType === 1 || item.deferType === 5">{{
												item.deferType ===
												1 ? '已延期' : '特殊延期'
											}}</view>
									</view>
									<view class="labs" v-if="tabIdx == 2">
										<view class="lab blue">{{ item.parts }}</view>
										<view class="lab blue">数量:{{ item.num }}</view>
									</view>
								</view>
								<view class="right" v-if="item.planContentUserVos.length <= 2">
									<view v-for="(user, uIdx) in item.planContentUserVos.slice(0, 2)" :key="uIdx"
										:class="['menber']"
										:style="{ background: !user.signInfo.isPlanStatus ? '#b9b9b9' : userinfo.nick_name === user.signUser.userName ? '#0091ff' : '#00C6C0' }">
										{{
											user.signUser.userName.length > 2 ? user.signUser.userName.slice(-2) :
											user.signUser.userName
										}}
									</view>
									<image v-if="item.planContentUserVos.length > 2" src="/static/images/down.png"
										mode=""></image>
								</view>
								<zb-tooltip @handchange="handchange($event, index)" :items="item" @click.stop v-else
									placement="bottom" background="#fff" :right="26" color="#333" :showIcon="false">
									<view class="right">
										<view v-for="(user, uIdx) in item.planContentUserVos.slice(0, 2)" :key="uIdx"
											:class="['menber']"
											:style="{ background: !user.signInfo.isPlanStatus ? '#b9b9b9' : userinfo.nick_name === user.signUser.userName ? '#0091ff' : '#00C6C0' }">
											{{
												user.signUser.userName.length > 2 ? user.signUser.userName.slice(-2) :
												user.signUser.userName
											}}
										</view>
										<image v-if="item.planContentUserVos.length > 2"
											:style="item.usermore ? 'transform: rotate(180deg);' : ''"
											src="/static/images/down.png" mode=""></image>
									</view>
									<view class="userlist" slot="content">
										<view v-for="(user, uIdx) in item.planContentUserVos" :key="uIdx"
											class="userlist-item">
											<view :class="['menber']"
												:style="{ background: !user.signInfo.isPlanStatus ? '#b9b9b9' : userinfo.nick_name === user.signUser.userName ? '#0091ff' : '#00C6C0' }">
												{{
													user.signUser.userName.length > 2 ? user.signUser.userName.slice(-2) :
													user.signUser.userName
												}}
											</view>
											<view class="userlist-item-name"
												:style="!user.signInfo.isPlanStatus ? 'color: #999999;' : 'color: #333'">
												{{
													user.signUser.userName
												}}</view>
										</view>
									</view>
								</zb-tooltip>
							</view>

							<view class="records-item-bottom" v-if="tabIdx == 0">
								<view class="">计划时间：{{ item.planDate.split(' ')[0] }}</view>
								<view class="" v-if="item.scoreStatus == 1">工单评分：{{ item.score || 0 }}分</view>
							</view>
							<view class="records-item-bottom" v-if="tabIdx == 1">报障时间：{{ item.createTime }}</view>
							<view class="records-item-bottom" v-if="tabIdx == 2">申请时间：{{ item.createTime }}</view>
						</view>

						<view class="more" v-if="!loading && total > 0 && total <= list.length">- 已经到底了 -</view>
						<view class="more" v-if="loading">加载中..</view>
					</view>
				</tk-screen-scroll>

				<time-select :defTime="[seachForm.startTime, seachForm.endTime]" :beforeToday="true" :atterToday="true" v-if="selectTimePopup"
					@close="closeSelectTimePopup"></time-select>
			</view>
			<view-top ref="viewTop" :scrollTop="scrollTop" :distance="100" @goTop="goTop"></view-top>
		</view>
	</ui-container>
</template>

<script>
import UiContainer from '@/components/ui-container/ui-container';
import { getLastDates } from '@/utils/tools.js';
import { getNowTime } from '@/utils/utils.js';
import timeSelect from '@/pages/index/components/timeSelect.vue';
import { mapState, mapActions } from 'vuex';
import { getOrderDetailUser } from '@/apis/statistic.js';
import Header from '@/pages/index/components/header.vue';
import TkScreenScroll from '@/components/tk-screen-scroll/index';
import { orderReordByOld, orderReordWxOld, orderReordPjOld } from '@/apis/workOrder.js';

import filterModel from './components/model';
import unipopup from '@/components/uni-popup/uni-popup.vue';
import { getMonthDate, formatTime } from '@/utils/utils.js';
import viewTop from '@/components/viewTop/viewTop.vue';
// 多标签组件
import tagsComponent from '@/components/tagsComponents/index';

export default {
	components: { Header, timeSelect, unipopup, filterModel, UiContainer, TkScreenScroll, viewTop, tagsComponent },
	computed: {
		...mapState('user', ['userinfo']),
		typeTitle() {
			return ['保养', '维修', '配件'][this.tabIdx] + '工单筛选';
		},
		filterArr() {
			let arr = [];
			if (this.tabIdx == 0) {
				arr = [{ title: '申请时间', key: 'date', list: [{ name: '近7天', value: 0 }, { name: '近30天', value: 1 }, { name: '近60天', value: 2 }] }];
			}
			return arr;
		}
	},
	data() {
		return {
			bool: true,
			scrollGoTop: 0, // 返回顶部
			scrollTop: 0,  // 滚动距离
			totalData: {
				byOrderCount: 0,
				pjOrderCount: 0,
				wxOrderCount: 0
			},
			selectTimePopup: false,
			filtIdx: 2,
			filterList: [
				{
					id: 10,
					name: '近七天'
				},
				{
					id: 11,
					name: '近30天'
				},
				{
					id: 12,
					name: '自定义'
				}
			],
			statusBy: {
				// 保养状态列表
				1: {
					text: '待开始',
					color: '#16BF99',
					icon: '/static/images/index/1.png'
				},
				2: {
					text: '进行中',
					color: '#0091ff',
					icon: '/static/images/index/2.png'
				},
				3: {
					text: '已提交',
					color: '#F7B500',
					icon: '/static/images/index/3.png'
				},
				5: {
					text: '维保签字',
					color: '#F7B500',
					icon: '/static/images/index/3.png'
				},
				4: {
					text: '签字完成',
					color: '#333',
					icon: '/static/images/index/s4d.png'
				}
			},
			statusWx: {
				// 维修状态
				1: {
					text: '待开始',
					color: '#16BF99',
					icon: '/static/images/index/1.png'
				},
				2: {
					text: '待开始',
					color: '#16BF99',
					icon: '/static/images/index/1.png'
				},
				3: {
					text: '进行中',
					color: '#0091ff',
					icon: '/static/images/index/2.png'
				},

				4: {
					text: '已完成',
					color: '#333',
					icon: '/static/images/index/s4d.png',
				},
				5: {
					text: '已关闭',
					color: '#999',
					icon: '',
				},
				6: {
					text: '已驳回',
					color: '#999',
					icon: '',
				},
			},
			statusPj: {
				// 配件状态
				5: {
					text: '待开始',
					color: '#16BF99',
					icon: '/static/images/index/1.png',
				},
				6: {
					text: '更换中',
					color: '#0091ff',
					icon: '/static/images/index/2.png',
				},

				7: {
					text: '已完成',
					color: '#333',
					icon: '/static/images/index/s4d.png',
				},
				9: {
					text: '已关闭',
					color: '#999',
					icon: '',
				},
				8: {
					text: '已驳回',
					color: '#999',
					icon: '',
				},
			},

			loading: false,
			tabIdx: 0,
			list: [],
			total: 0,
			current: 1,
			customDate: '',
			seachForm: {
				dateType: 2, // 日期范围 1今天，2近七天，3近30天，4自定义日期
				startTime: '',
				endTime: '',
				userList: [],
				groupId: [],
				memberList: [],
				planStatus: '',
				keyword: ''
			},
			type: 0,
			csd: {},
			wxCsd: {},
			pjCsd: {},
			allFilter: true,
			showFilter: false,
			dateObj: {
				startTime: '',
				endTime: '',
				value: ''
			},
			dateTemp: {},
			formatTime: formatTime,
			getMonthDate: getMonthDate,
			isCanScroll: true
		};
	},
	onLoad(os) {
		// 0 从详情页 进来,1 从公众号模板消息 //2 从历史工单进来
		this.type = os.type || 0;
		// this.showFilter = true;
		this.tabIdx = os.tabIdx || 0;
		this.$nextTick(() => {
			this.$refs.filterModel.initModel(this.tabIdx);
		});
	},
	async onShow() {
		if (uni.getStorageSync('newTop')) {
			this.bool = false;
		}
		if (this.userinfo.user_id) {
			if (this.bool) {
				this.initData();
			}
		} else {
			let hasLogin = await this.handleRreshToken();
			if (!hasLogin) {
				uni.navigateTo({
					url: '../login/index'
				});
			}
			this.initData();
		}
		if (this.tabIdx == 0) {
			this.csd = {};
		} else if (this.tabIdx == 1) {
			this.wxCsd = {};
		} else {
			this.pjCsd = {};
		}
	},
	onPullDownRefresh() {
		this.handleClickTab(this.tabIdx);
	},
	methods: {
		toBuilddingDetail(item) {
			// console.log(item)s
			uni.navigateTo({
				url: '/pageModules/projectInfo/detail?id=' + item.buildingId,
			});
		},
		goTop() {
			this.scrollGoTop = 1;
			this.$nextTick(() => {
				this.scrollGoTop = 0;
			});
		},
		scroll(e) {
			this.scrollTop = e.target.scrollTop;
		},
		getActIdx(idx) {
			this.tabIdx = idx;
			this.handleClickTab(this.tabIdx);
		},
		// 去我的任务
		toMyTask() {
			console.log(12222);
			uni.navigateTo({
				// url: "/pages/home/index?footerIndex=1",
				url: '/pages/home/index?footerKey=myTask',
				fail(e) {
					console.log(e);
				},
			});
		},
		scrolltolower() {
			this.getList(this.csd);
		},
		showFilterChange(res) {
			console.log(res, 6666);
			this.isCanScroll = !res;
		},
		...mapActions('user', ['handleRreshToken', 'getRoutes']),
		// 去项目详情
		toProjectDetail(item) {
			console.log(item);
			// type=2 =>是个人工单
			if (this.type == 2) {
				uni.navigateTo({
					url: '/pageModules/projectInfo/detail?id=' + item.buildingId,
				});
			} else {
				return;
			}
		},
		// 获取筛选的东西
		filterd(res) {
			let { choosed, dateObj } = res;
			let choosedKeys = Object.keys(choosed);

			// let obj = {};
			if (this.type == 2) {
				this.seachForm.startTime = res.dateObj.startTime;
				this.seachForm.endTime = res.dateObj.endTime;
				this.dateObj = dateObj;
			}

			this.csd = choosed;
			this.current = 1;
			this.totla = 0;
			this.list = [];

			this.getList(choosed);
			// this.$refs.filterModel.initModel(this.tabIdx);
		},
		// 获取筛选框的数据
		getFilterData(res) {
			this.csd = res.choosed;
		},
		// 顶部按钮返回上一页
		handleBack() {
			uni.navigateBack({});
		},
		// aa() {
		// 	console.log('点击了筛选按钮');
		// 	this.showFilter = true;
		// },
		handchange(val, index) {
			this.list[index].usermore = val;
		},
		toNext() {
			uni.navigateBack();
		},
		// 切换时间类型
		filterFuc(res, idx) {
			console.log('filterFuc', res);
			this.filtIdx = idx;
			if (res.id == 10) {
				// 近七天
				const dates = getLastDates(7);
				this.seachForm.startTime = dates.startTime;
				this.seachForm.endTime = dates.endTime;
				this.customDate = '';
				this.getTotals();
				this.handleClickTab(this.tabIdx);
			}
			if (res.id == 11) {
				// 近30天
				const dates = getLastDates(30);
				this.seachForm.startTime = dates.startTime;
				this.seachForm.endTime = dates.endTime;
				this.customDate = '';
				this.getTotals();
				this.handleClickTab(this.tabIdx);
			}
			if (res.id == 12) {
				this.selectTimePopup = true;
				return;
			}
		},
		// 初始化数据
		initData() {
			// console.log('初始化页面');
			console.log(this.type, 'type的值');
			// this.seachForm.planStatus = this.type == 0 ? '' : 1;
			if (this.type == 0 || this.type == 1) {
				uni.getStorage({
					key: 'recordFilter',
					success: (res) => {
						console.log(res.data, '缓存的值');

						if (this.type == 1) {
							// 1公众号模板
							this.seachForm.userList = [this.userinfo.user_id];
						} else {
							this.seachForm.userList = res.data.userList;
						}
						this.seachForm.dateType = res.data.filter.dateType;
						this.seachForm.startTime = res.data.filter.startTime;
						this.seachForm.endTime = res.data.filter.endTime;

						if (res.data.filter.dateType == 2) {
							this.filtIdx = 0;
							this.customDate = '';
						} else if (res.data.filter.dateType == 3) {
							this.filtIdx = 1;
							this.customDate = '';
						} else {
							this.filtIdx = 2;
							if (this.seachForm.startTime == this.seachForm.endTime) {
								this.customDate = this.seachForm.startTime.replaceAll('-', '/');
							} else {
								let start = this.seachForm.startTime.split('-');
								let end = this.seachForm.endTime.split('-');
								this.customDate =
									start[1] + '/' + start[2] + '-' + end[1] + '/' + end[2];
							}
						}
						// console.log(res,this.seachForm,666);
						this.getTotals();
						this.handleClickTab(this.tabIdx);
					},
				});
			} else {
				// 不走缓存
				this.seachForm.userList = [this.userinfo.user_id];
				this.seachForm.startTime = '';
				this.seachForm.endTime = '';
				this.getTotals();
				this.handleClickTab(this.tabIdx);
			}
		},

		// 自定义日期
		closeSelectTimePopup(res) {
			if (res) {
				console.log('自定义日期', res);
				let start = '';
				let end = '';

				if (res.indexOf('-') != -1) {
					const timeArr = res.split('-');
					start = timeArr[0].replaceAll('.', '-');
					end = timeArr[1].replaceAll('.', '-');
				} else {
					const time = res.replaceAll('.', '-');
					start = time;
					end = time;
				}
				const nowDay = getNowTime();
				let nowtime = new Date(nowDay).getTime();
				let starttime = new Date(start).getTime();
				let endtime = new Date(end).getTime();
				if (endtime >= nowtime) {
					console.log('包含今天');
					uni.showToast({
						title: '自定义日期范围须小于今天',
						icon: 'none',
					});
					return;
				}

				this.seachForm.startTime = start;
				this.seachForm.endTime = end;
				this.seachForm.dateType = 4;
				if (this.seachForm.startTime == this.seachForm.endTime) {
					this.customDate = this.seachForm.startTime;
				} else {
					let startD = this.seachForm.startTime.split('-');
					let endD = this.seachForm.endTime.split('-');
					this.customDate = startD[1] + '/' + startD[2] + '-' + endD[1] + '/' + endD[2];
				}
				this.getTotals();
				this.handleClickTab(this.tabIdx);
			} else {
			}
			this.selectTimePopup = false;
		},
		// 前往详情页
		toDetail(item) {
			uni.setStorageSync('newTop', this.scrollTop);
			if (item.typeStatus == 2) {
				// 维修详情
				uni.navigateTo({
					url: '/subpages/repair/repariDetail?planId=' + item.planId + '&elevatorId=' + item.elevatorId
				});
			}
			// 配件更换
			if (item.typeStatus == 4) {
				uni.navigateTo({
					url: `/subpages/workOrders/partOrder?planId=${item.planId}&elevatorId=${item.elevatorId}`
				});
			}
			if (item.typeStatus == 1) {
				// 保养详情
				// let objs = {
				// 	overdueName: item.timeliness,
				// 	planCheckName: item.templateNames && item.templateNames.join(","),
				// }
				let overdueName = item.timeliness;
				let planCheckName = item.templateNames && item.templateNames.join(',');
				uni.navigateTo({
					url: `/subpages/workOrders/detail?planId=${item.planId}&elevatorId=${item.elevatorId}&overdueName=${overdueName}&planCheckName=${planCheckName}`
				});
			}
		},
		// 查询总数
		getTotals() {
			// console.log(this.seachForm,"总数获取请求参数");
			orderReordByOld({
				current: 1,
				size: 1,
				endTime: this.seachForm.endTime + ' 23:59:59',
				startTime: this.seachForm.startTime + ' 00:00:00',
				userIds: this.seachForm.userList,
				planStatus: this.type == 2 ? [4] : []
			}).then(res => {
				this.totalData.byOrderCount = res.data.total || 0;
			});
			orderReordWxOld({
				current: 1,
				size: 1,
				endTime: this.seachForm.endTime + ' 23:59:59',
				startTime: this.seachForm.startTime + ' 00:00:00',
				userIds: this.seachForm.userList,
				planStatus: this.type == 2 ? [4] : []
			}).then(res => {
				this.totalData.wxOrderCount = res.data.total || 0;
			});
			orderReordPjOld({
				current: 1,
				size: 1,
				endTime: this.seachForm.endTime + ' 23:59:59',
				startTime: this.seachForm.startTime + ' 00:00:00',
				userIds: this.seachForm.userList,
				planStatus: this.type == 2 ? [7] : []
			}).then(res => {
				this.totalData.pjOrderCount = res.data.total || 0;
			});
		},
		// 获取列表 param为额外的参数
		getList(params) {
			if (this.loading || (this.list.length >= this.total && this.total > 0)) {
				uni.hideLoading();
				return;
			}
			let baseParams = {
				current: this.current,
				size: 10,
				endTime: this.seachForm.endTime + ' 23:59:59',
				startTime: this.seachForm.startTime + ' 00:00:00',
				userIds: this.seachForm.userList,
				keyword: this.seachForm.keyword,
				planStatus: this.type == 2 ? [[4, 4, 7][this.tabIdx]] : params && params.planStatus && params.planStatus.length ? params.planStatus : []
			};
			this.loading = true;

			const queList = [orderReordByOld, orderReordWxOld, orderReordPjOld];
			queList[this.tabIdx](
				params ? { ...params, ...baseParams } : { ...baseParams }
			)
				.then((res) => {
					const records = res.data.records || [];

					for (var i = 0; i < records.length; i++) {
						records[i].usermore = false;
						if (records[i].partsName) {
							const parts = records[i].partsName.split('&amp;&amp;');
							records[i].parts = parts[parts.length - 1];
						}

						for (var j = 0; j < records[i].planContentUserVos.length; j++) {
							records[i].planContentUserVos[j].signInfo = JSON.parse(
								records[i].planContentUserVos[j].signInfo || '{}'
							);
						}
						if (records[i].planContentUserVos) {
							records[i].planContentUserVos = records[
								i
							].planContentUserVos.sort(this.userSort);
						}
					}
					this.total = res.data.total;
					this.list.push(...records);
					this.current++;
					uni.hideLoading();
					uni.stopPullDownRefresh();
					this.loading = false;
					if (this.tabIdx == 0) {
						this.totalData.byOrderCount = res.data.total || 0;
					}
					if (this.tabIdx == 1) {
						this.totalData.wxOrderCount = res.data.total || 0;
					}
					if (this.tabIdx == 2) {
						this.totalData.pjOrderCount = res.data.total || 0;
					}
				})
				.catch((err) => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
					this.loading = false;
				});
		},
		userSort(a, b) {
			if (a.signUser.isPlanStatus && !b.signUser.isPlanStatus) {
				return -1;
			} else {
				return 1;
			}
		},
		// 切换导航栏
		handleClickTab(idx) {
			if (this.loading) {
				return;
			}
			uni.showLoading({
				title: '加载中',
				mask: true,
			});
			this.tabIdx = idx;
			this.list = [];
			this.seachForm.keyword = '';
			if (this.type == 2) {
				this.seachForm.startTime = '';
				this.seachForm.endTime = '';
			}

			this.current = 1;
			this.total = 0;

			this.getTotals();
			this.getList();
			this.csd = {};
			this.dateObj.startTime = '';
			this.dateObj.endTime = '';
			this.dateObj.value = '';
			this.$nextTick(() => {
				this.$refs.filterModel.initModel(idx);
				// this.$refs.filterModel.reset();
			});
			this.goTop();
			// console.log('回到顶部');
		},
		// 重置条件
		handleReSet(e) {
			console.log(e, 'e的值');
			// this.seachForm.keyword=e.detail.value
			this.list = [];
			this.current = 1;
			this.total = 0;
			this.getList(this.csd);
		},
	},
};
</script>
<style lang="scss">
page {
	background-color: #f3f6f8;
}
</style>
<style lang="scss" scoped>
.none-block {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	height: 250rpx;
	padding-top: 120rpx;

	.img {
		image {
			width: 64rpx;
			height: 64rpx;
		}
	}

	.text {
		width: 100%;
		color: #999999;
		font-size: 26rpx;
	}
}

.header {
	position: sticky;
	top: 0;
	left: 0;
	z-index: 99;
	background-color: #fff;

	.tabs {
		width: 96%;
		padding: 0 2%;
		background-color: #ffffff;
		display: flex;
		//    position: sticky;
		// z-index: 99999;
		border-bottom: 2rpx #eee solid;

		&-item {
			height: 84rpx;
			line-height: 83rpx;
			margin: 0 20rpx;
			font-size: 26rpx;
			font-weight: 400;
			border-bottom: 4rpx solid #fff;
			color: #93b1c7;
			transition: 0.4s all;
		}

		.act {
			color: #0091ff;
			// font-weight: bold;
			// height: 60rpx;
			// box-sizing: border-box;
			// padding: 16rpx 20rpx;
			border-color: #0091ff;
			font-size: 30rpx;
		}
	}

	.tips {
		background: #f3f6f8;
		padding: 0 20rpx;
		font-size: 24rpx;
		display: flex;
		justify-content: space-between;
		color: #666;

		view {
			padding: 20rpx 0;
		}

		view:nth-child(2) {
			display: flex;
			flex: 1;
			justify-content: flex-end;
		}
	}
}

.fitlerBox {
	// height: 96rpx;
	background: #ffffff;
	display: flex;
	align-items: center;
	padding: 0 20rpx;
	border-bottom: 2rpx solid #eee;

	// margin: 20rpx 0;
	.left {
		// width: 600rpx;
		// height: 64rpx;
		// box-sizing: border-box;
		// background: #f6f6f6;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		padding: 20rpx 0;

		/deep/ .uni-searchbar {
			padding: 0;
		}

		/deep/ .uni-searchbar__box {
			width: 600rpx;
			height: 64rpx;
			justify-content: flex-start;
			font-size: 26rpx;
			color: #ccc;
			background-color: #f6f6f6;
			border: 0;
			border-radius: 8rpx;
		}

		/deep/ .uni-icons {
			width: 40rpx;
			height: 40rpx;
		}

		/deep/ .uni-searchbar__text-placeholder {
			margin: 0;
		}

		/deep/ .uni-searchbar__box-search-input {
			border: 0;
			padding: 0;
		}

		input {
			font-size: 26rpx;
			height: 36rpx;
			padding-left: 28rpx;
			width: 600rpx !important;
			box-sizing: border-box;
			// padding: ;
		}

		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.right {
		display: flex;
		flex: 1;
		align-items: center;
		font-size: 26rpx;
		color: #333;
		justify-content: flex-end;

		image {
			width: 26rpx;
			height: 26rpx;
		}
	}
}

.records {
	width: 100%;
	color: #333;
	min-height: 1000rpx;

	// background: pink;
	&-item {
		width: calc(100% - 40rpx);
		margin: 20rpx;
		background-color: #fff;
		border-radius: 8rpx;

		&-head {
			display: flex;
			color: #333333;
			font-size: 26rpx;
			justify-content: space-between;
			// align-items: center;
			align-items: baseline;
			border-bottom: 2rpx solid #eeeeee;
			padding: 20rpx;

			.buildding {
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;
				flex: 1;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 7rpx;
					padding-top: 5rpx;
				}

				view {
					flex: 1;
					line-height: 38rpx;
				}
			}

			.status {
				display: flex;
				justify-content: flex-end;
				align-items: flex-start;
				width: 200rpx;

				image {
					width: 32rpx;
					padding-top: 3rpx;
					height: 32rpx;
					margin-right: 7rpx;
				}
			}
		}

		&-content {
			padding: 24rpx 20rpx;
			display: flex;
			align-items: center;
			padding-bottom: 12rpx;

			.left {
				flex: 1;

				.name {
					font-size: 32rpx;
					font-weight: bold;
				}

				.tags {
					display: flex;
					flex-wrap: wrap;
					justify-content: flex-start;
					align-items: baseline;
					font-size: 26rpx;
					color: #666;
					margin: 16rpx 0;

					.tag {
						border: 2rpx solid #cccccc;
						border-radius: 20rpx;
						font-size: 24rpx;
						padding: 0rpx 13rpx;
						margin: 8rpx 0;
						margin-right: 12rpx;
					}
				}

				.labs {
					display: flex;
					flex-wrap: wrap;
					justify-content: flex-start;
					align-items: baseline;

					.lab {
						font-size: 24rpx;
						color: #e02020;
						background: #ffe3e3;
						padding: 0rpx 13rpx;
						border-radius: 4rpx;
						margin: 8rpx 0;
						margin-right: 8rpx;
					}

					.blue {
						color: #0091ff;
						background: #dcf0ff;
					}
				}
			}

			.right {
				display: flex;
				align-items: center;
				width: 72px;
				justify-content: flex-end;
				flex-wrap: wrap;

				.menber {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 20rpx;
					width: 48rpx;
					height: 48rpx;
					border-radius: 50%;
					background-color: #0091ff;
					color: #fff;
					margin-left: 4rpx;
				}

				image {
					width: 25rpx;
					height: 25rpx;
					margin-left: 5rpx;
					transition: 0.3s all;
				}
			}

			.userlist {
				&-item {
					display: flex;
					align-items: center;
					width: 180rpx;
					margin-bottom: 17rpx;

					.menber {
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 20rpx;
						width: 48rpx;
						height: 48rpx;
						border-radius: 50%;
						background-color: #0091ff;
						color: #fff;
						margin-left: 4rpx;
						margin-right: 14rpx;
					}

					&-name {
						font-size: 24rpx;
						color: #333;
						overflow: hidden;
						flex: 1;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}

				&-item:last-child {
					margin-bottom: 0;
				}
			}
		}

		&-bottom {
			padding: 20rpx;
			border-top: 2rpx solid #eeeeee;
			color: #999999;
			font-size: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}
}

.more {
	width: 100%;
	padding: 30rpx 0;
	text-align: center;
	color: #999999;
	font-size: 24rpx;
}
</style>
